<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>健康饮食 - 食物搜索</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 防止内容溢出 */
        body {
            overflow-x: hidden;
            max-width: 100vw;
        }
        /* 确保所有内容在容器内 */
        .container {
            width: 100%;
            max-width: 100%;
            overflow-x: hidden;
        }
        /* 确保热门搜索标签不溢出 */
        .flex.flex-wrap {
            width: 100%;
        }
    </style>
</head>
<body class="bg-gray-100 text-gray-800">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center">
            <a href="index.html" class="mr-3">
                <i class="fas fa-arrow-left text-gray-600"></i>
            </a>
            <h1 class="text-xl font-bold text-green-600">食物搜索</h1>
        </div>
    </header>

    <!-- 搜索框 -->
    <div class="bg-white shadow-sm px-4 py-3 sticky top-0 z-10">
        <div class="relative">
            <input type="text" placeholder="搜索食物" class="w-full bg-gray-100 rounded-full py-2 pl-10 pr-4 focus:outline-none focus:ring-2 focus:ring-green-500">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-500"></i>
        </div>
    </div>

    <!-- 主要内容区 -->
    <main class="container mx-auto px-4 py-6">
        <!-- 搜索历史 -->
        <div class="mb-8">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-semibold">搜索历史</h2>
                <button class="text-sm text-gray-500">
                    <i class="fas fa-trash-alt mr-1"></i>
                    清空
                </button>
            </div>
            <div class="flex flex-wrap gap-2">
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">苹果</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">鸡胸肉</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">全麦面包</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">牛奶</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">西兰花</span>
            </div>
        </div>

        <!-- 食物分类 -->
        <div class="mb-8">
            <h2 class="text-lg font-semibold mb-3">食物分类</h2>
            <div class="grid grid-cols-4 gap-3">
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-red-100 p-3 rounded-full mb-2">
                        <i class="fas fa-apple-alt text-red-600"></i>
                    </div>
                    <span class="text-sm">水果</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-green-100 p-3 rounded-full mb-2">
                        <i class="fas fa-carrot text-green-600"></i>
                    </div>
                    <span class="text-sm">蔬菜</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-yellow-100 p-3 rounded-full mb-2">
                        <i class="fas fa-bread-slice text-yellow-600"></i>
                    </div>
                    <span class="text-sm">主食</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-purple-100 p-3 rounded-full mb-2">
                        <i class="fas fa-drumstick-bite text-purple-600"></i>
                    </div>
                    <span class="text-sm">肉类</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-blue-100 p-3 rounded-full mb-2">
                        <i class="fas fa-fish text-blue-600"></i>
                    </div>
                    <span class="text-sm">海鲜</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-indigo-100 p-3 rounded-full mb-2">
                        <i class="fas fa-egg text-indigo-600"></i>
                    </div>
                    <span class="text-sm">蛋奶</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-pink-100 p-3 rounded-full mb-2">
                        <i class="fas fa-seedling text-pink-600"></i>
                    </div>
                    <span class="text-sm">豆类</span>
                </div>
                <div class="bg-white rounded-lg shadow-sm p-3 flex flex-col items-center">
                    <div class="bg-gray-100 p-3 rounded-full mb-2">
                        <i class="fas fa-ellipsis-h text-gray-600"></i>
                    </div>
                    <span class="text-sm">更多</span>
                </div>
            </div>
        </div>

        <!-- 热门搜索 -->
        <div class="mb-8">
            <h2 class="text-lg font-semibold mb-3">热门搜索</h2>
            <div class="flex flex-wrap gap-2">
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm flex items-center">
                    <span class="bg-red-500 text-white w-4 h-4 flex items-center justify-center rounded-full text-xs mr-1">1</span>
                    鸡胸肉
                </span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm flex items-center">
                    <span class="bg-orange-500 text-white w-4 h-4 flex items-center justify-center rounded-full text-xs mr-1">2</span>
                    燕麦
                </span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm flex items-center">
                    <span class="bg-yellow-500 text-white w-4 h-4 flex items-center justify-center rounded-full text-xs mr-1">3</span>
                    牛奶
                </span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">牛油果</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">三文鱼</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">西兰花</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">全麦面包</span>
                <span class="bg-white px-3 py-1 rounded-full text-sm shadow-sm">藜麦</span>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div class="mb-20">
            <div class="flex justify-between items-center mb-3">
                <h2 class="text-lg font-semibold">搜索结果</h2>
                <div class="flex items-center">
                    <span class="text-sm text-gray-500 mr-2">排序</span>
                    <select class="text-sm bg-white rounded px-2 py-1 border border-gray-200">
                        <option>热量升序</option>
                        <option>热量降序</option>
                        <option>按蛋白质</option>
                        <option>按收藏量</option>
                    </select>
                </div>
            </div>
            
            <!-- 食物列表 -->
            <div class="space-y-3">
                <!-- 食物项目1 -->
                <div class="bg-white rounded-lg shadow-sm p-4 flex">
                    <img src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb" alt="苹果" class="w-20 h-20 object-cover rounded-lg mr-4">
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="font-medium">苹果</h3>
                            <button class="text-gray-400">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">100g含有52大卡</p>
                        <div class="flex mt-2">
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">碳水</span>
                                <p class="text-sm">13.8g</p>
                            </div>
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">蛋白质</span>
                                <p class="text-sm">0.3g</p>
                            </div>
                            <div>
                                <span class="text-xs text-gray-500">脂肪</span>
                                <p class="text-sm">0.2g</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 食物项目2 -->
                <div class="bg-white rounded-lg shadow-sm p-4 flex">
                    <img src="https://images.unsplash.com/photo-1607532941433-304659e8198a" alt="香蕉" class="w-20 h-20 object-cover rounded-lg mr-4">
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="font-medium">香蕉</h3>
                            <button class="text-red-500">
                                <i class="fas fa-heart"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">100g含有89大卡</p>
                        <div class="flex mt-2">
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">碳水</span>
                                <p class="text-sm">22.8g</p>
                            </div>
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">蛋白质</span>
                                <p class="text-sm">1.1g</p>
                            </div>
                            <div>
                                <span class="text-xs text-gray-500">脂肪</span>
                                <p class="text-sm">0.3g</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 食物项目3 -->
                <div class="bg-white rounded-lg shadow-sm p-4 flex">
                    <img src="https://images.unsplash.com/photo-1615485290382-441e4d049cb5" alt="鸡胸肉" class="w-20 h-20 object-cover rounded-lg mr-4">
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="font-medium">鸡胸肉</h3>
                            <button class="text-gray-400">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">100g含有165大卡</p>
                        <div class="flex mt-2">
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">碳水</span>
                                <p class="text-sm">0g</p>
                            </div>
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">蛋白质</span>
                                <p class="text-sm">31g</p>
                            </div>
                            <div>
                                <span class="text-xs text-gray-500">脂肪</span>
                                <p class="text-sm">3.6g</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 食物项目4 -->
                <div class="bg-white rounded-lg shadow-sm p-4 flex">
                    <img src="https://images.unsplash.com/photo-1563822249366-3efb23b8e0c9" alt="牛奶" class="w-20 h-20 object-cover rounded-lg mr-4">
                    <div class="flex-1">
                        <div class="flex justify-between items-start">
                            <h3 class="font-medium">全脂牛奶</h3>
                            <button class="text-gray-400">
                                <i class="far fa-heart"></i>
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">100ml含有65大卡</p>
                        <div class="flex mt-2">
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">碳水</span>
                                <p class="text-sm">4.8g</p>
                            </div>
                            <div class="mr-3">
                                <span class="text-xs text-gray-500">蛋白质</span>
                                <p class="text-sm">3.3g</p>
                            </div>
                            <div>
                                <span class="text-xs text-gray-500">脂肪</span>
                                <p class="text-sm">3.6g</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部导航栏 -->
    <footer class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200">
        <div class="flex justify-around items-center py-2">
            <a href="index.html" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-home text-xl"></i>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-green-600">
                <i class="fas fa-search text-xl"></i>
                <span class="text-xs mt-1">搜索</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-chart-pie text-xl"></i>
                <span class="text-xs mt-1">分析</span>
            </a>
            <a href="#" class="flex flex-col items-center p-2 text-gray-500">
                <i class="fas fa-user text-xl"></i>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </footer>
</body>
</html> 